<template>

  <div class="app-container">
    <div class="filter-container">
      {{ $t('wechat.search') }}  <el-select v-model="listQuery.grade" :placeholder="$t('wechat.all')" clearable class="filter-item" style="width: 130px">
        <el-option v-for="item in wechatTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getList">
        {{ $t('table.search') }}
      </el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column :label="$t('wechat.user_id')" width="110px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.user_id }}</span>
        </template>
      </el-table-column>

      <el-table-column :label="$t('wechat.nick_name')" width="110px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.nickName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="用户头像" width="110px" align="center">
        <template slot-scope="{row}">
          <img :src="row.avatarUrl" style="width:50px;height:50px;">
        </template>
      </el-table-column>
      <el-table-column label="用户姓名" align="center" width="110px">
        <template slot-scope="{row}">
          <span>{{ row.realName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="获奖名称" align="center">
        <template slot-scope="{row}">
          <span>{{ row.awardName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="获奖级别" width="110px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.awardGrade }}</span>
        </template>
      </el-table-column>
      <el-table-column label="获奖图片" width="110px" align="center">
        <template slot-scope="{row}">
          <img :src="row.awardImageUrl" style="width:50px;height:50px;">
        </template>
      </el-table-column>
      <el-table-column label="获奖时间" width="110px" align="center">
        <template slot-scope="{row}">
          <span>{{ dateFormat(row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收货人" width="110px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.addressName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收货地址" width="110px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收货电话" width="110px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.addressPhone }}</span>
        </template>
      </el-table-column>

    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
import moment from 'moment'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { fetchAwardList } from '@/api/community'
export default {
  name: 'Tab',
  components: { Pagination },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        pageSize: 20,
        importance: undefined,
        title: undefined,
        grade: '-1',
        orderBy: 'likes',
        order: 1
      },
      comment_id: { comment_id: '' },
      wechatTypeOptions: [{ display_name: '全部', key: '-1' }, { display_name: '一等奖', key: '1' }, { display_name: '二等奖', key: '2' }, { display_name: '三等奖', key: '3' }]
    }
  },
  watch: {
    activeName(val) {
      this.$router.push(`${this.$route.path}?tab=${val}`)
    }
  },
  created() {
    this.getList()
    // init the default selected tab
    const tab = this.$route.query.tab
    if (tab) {
      this.activeName = tab
    }
  },
  methods: {
    dateFormat: function(date) {
      if (date == undefined) { return '' }
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
    getList() {
      this.listLoading = true
      fetchAwardList(this.listQuery).then(response => {
        console.log(response)
        this.list = response.info.list
        this.total = response.info.count

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    }
  }
}
</script>

<style scoped>
  .tab-container {
    margin: 30px;
  }
</style>
